<template>
  <slot></slot>
</template>
<script>
  import $ from '../dfish.js'
  import WidgetBase from './WidgetBase.vue'

  export default {
    name: 'w-dialog-move',
    methods: {
      onmousedown(e) {
        let o = $.dialog(e.currentTarget)
        if (o) {
          if (o.x.movable !== false && !o.x.fullScreen) {
            let d = o.el()
            let b = o._pos.pix_b ? -1 : 1
            let r = o._pos.pix_r ? -1 : 1
            let v = b < 0 ? 'bottom' : 'top'
            let h = r < 0 ? 'right' : 'left'
            let x = e.clientX
            let y = e.clientY
            let t = $.number(d.style[v])
            let l = $.number(d.style[h])
            let m
            let n = document.documentElement.clientHeight
            let w = document.documentElement.clientWidth
            $.moveup(function(e) {
              !m && (m = $.q('<div class=w-dialog-move></div>').appendTo(document.body));
              let cx = $.numRange(e.clientX, 0, w)
              let cy = $.numRange(e.clientY, 0, n)
              o.setPosition({[v]: (t + b * (cy - y)) + 'px', [h]: (l + r * (cx - x)) + 'px'})
            }, function(e) {
              m && m.remove()
            }, e)
          }
        }
      }
    },
    computed: {
      mousedown() {
        return this.onmousedown.bind(this)
      }
    },
    mounted() {
      this.$el.nextElementSibling.addEventListener('mousedown', this.mousedown)
    },
    unmounted() {
      this.$el.nextElementSibling.removeEventListener('mousedown', this.mousedown)
    }
  }
</script>

<style>
  .w-dialog-move {
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 101;
  }
</style>
